<template>
	<view class="list-item" :class="disabled ? 'list-item--disabled' : ''" :hover-class="disabled ? '' : 'list-item--hover'" @click="onClick">
		<view class="item-left">
			<view class="left-icon slw-icon" v-html="icon.html" :style="{ color: icon.color }"></view>
			<view class="left-name">{{leftName}}</view>
		</view>
		<view class="item-right">
			<view class="right-name">{{rightName}}</view>
			<view class="right-icon slw-icon">&#xe733;</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//	图标
			icon: {
				type: Object,
				default: () => {
					return {html: '', color: '#999'}
				}
			},
			//	是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			//	类名
			className: {
				type: String,
				default: ''
			},
			//	图标
			leftIcon: {
				type: String,
				default: ''
			},
			iconColor: {
				type: String,
				default: ''
			},
			//	名称
			leftName: {
				type: String,
				default: ''
			},
			//	右边名称
			rightName: {
				type: String,
				default: ''
			}
		},
		methods: {
			//	点击事件
			onClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-item{
		height: 100rpx;
		display: flex;
		position: relative;
		align-items: center;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 18rpx;
	}
	.list-item--disabled {
		opacity: 0.3;
	}
	.list-item--hover{
		background-color: #f1f1f1;
	}
	
	
	.item-left{
		display: flex;
		align-items: center;
	}
	.left-icon{
		color: #333;
		font-size: 36rpx;
		margin-right: 10rpx;
	}
	.left-name{
		color: #333;
		font-size: 30rpx;
		line-height: 1;
	}
	
	.item-right{
		color: #999;
		display: flex;
		align-items: center;
	}
	.right-name{
		line-height: 1;
	}
	.right-icon{
		margin-left: 10rpx;
	}
</style>
